<template>
	<view class="main" :style="{ '--content-top': showUploadContainer ? contentTop + 'px' : '23px' }">
		<!-- #ifndef MP-TOUTIAO -->
		<!-- <nav-bar ref="navRef" title="支付"></nav-bar> -->
		<!-- #endif -->
		<!-- 图片上传  -->
		<uploadContainer ref="uploadContainerRef" :type="1" :uploadImgInfo="uploadImgInfo" @clearImg="clearImg" @updateImgInfo="updateImgInfo" :show="showUploadContainer" />
		<!-- 图片上传  -->

		<view class="content" @touchstart="touchStart" @touchend="touchEnd">
			<view class="content_bar"></view>
			<view class="tabs flex">
				<view :class="['tab_item flex_center', tabIdx === idx ? 'act_tab_item' : '']" v-for="(tab, idx) in ['AI画图', 'AI改图']" :key="idx" @tap.stop="changeTab(idx)">
					<view class="">{{ tab }}</view>
				</view>
				<view class="tab_bar" :style="{ 'transform': `translateX(calc(${tabIdx * 100}% + ${tabIdx ? '8rpx' : ''}))` }"></view>
			</view>
			<!-- , showUploadContainer ? '' : 'tab_scroll_full' -->
			<view class="tab_scroll">
				<scroll-view :scroll-y="!showUploadContainer" style="height: 100%" :show-scrollbar="false" :scroll-top="scrollTop" @scroll="scroll">
					<view class="scroll">
						<view class="scroll_row" v-for="(tab, idx) in currentTabList" :key="idx" @tap.stop="viewDetail(tab.value)">
							<view class="button_row flex_bw">
								<view class="">{{ tab.name }}</view>
								<view class="button_row_icon flex">
									<image :src="$imgsUrl(tab.icon)" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 历史按钮 -->
		<view class="history_button flex_center" @tap.stop="viewHistory">
			<image :src="$imgsUrl('0x72506283')" mode=""></image>
			<view class="">历史生成</view>
		</view>
		<!-- 历史按钮 -->

		<!-- <selectSpaceExample ref="selectSkuImg" /> -->
	</view>
</template>

<script>
import uploadContainer from "./modules/uploadContainer.vue";
import { getEleInfo } from "@/common/util/common";
export default {
	components: { uploadContainer },
	data() {
		return {
			scrollTop: 0,
			scrollInfo: {
				oldTop: 0,
				top: 0
			},
			showUploadContainer: true,
			//上传的图片
			uploadImgInfo: {
				src: "",
				size: 0, //换算成 mb
				type: 0, //1视频 0图片
				status: "loading",
				process: "", // 上传成功的图片路径
				errorMsg: ""
			},
			contentTop: 0,
			tabIdx: 0,
			touchStartX: 0,
			touchStartY: 0,
			isScroll: false,
			drawPicturesTabList: [
				{
					name: "毛胚房设计",
					icon: "0x725062814",
					value: "1"
				},
				{
					name: "软装搭配",
					icon: "0x725062811",
					value: "2"
				},
				{
					name: "旧房改造",
					icon: "0x725062812",
					value: "3"
				}
			],
			changeTheImageTabList: [
				{
					name: "产品替换",
					icon: "0x725062815",
					value: "4"
				},
				{
					name: "材质替换",
					icon: "0x725062816",
					value: "5"
				},
				{
					name: "家居背景替换",
					icon: "0x725062810",
					value: "6"
				},
				{
					name: "换涂料",
					icon: "0x725062813",
					value: "7"
				},
				{
					name: "换瓷砖",
					icon: "0x725062817",
					value: "8"
				},
				{
					name: "换门板",
					icon: "0x725062818",
					value: "9"
				},
				{
					name: "换台面",
					icon: "0x725062819",
					value: "10"
				}
			]
		};
	},
	onLoad() {
		const that = this;

		// 内容区域距离顶部高度
		getEleInfo(".content", this).then((res) => {
			that.contentTop = res.top;
		});

		// setTimeout(() => {
		// 	this.$refs.selectSkuImg.open();
		// }, 500);
	},
	computed: {
		currentTabList() {
			return this.tabIdx === 0 ? this.drawPicturesTabList : this.changeTheImageTabList;
		}
	},
	methods: {
		// 查看历史
		viewHistory() {
			uni.navigateTo({
				url: "./historyCreate"
			});
		},
		viewDetail(value) {
			uni.navigateTo({
				url: `./create?mode=${this.tabIdx + 1}&type=${value}`
			});
		},
		// 设置滚动位置
		changeTop(top = 0) {
			this.scrollTop = this.scrollInfo.oldTop;
			this.$nextTick(function () {
				this.scrollTop = top;
			});
		},
		scroll: function (e) {
			this.scrollInfo.oldTop = e.detail.scrollTop;
		},
		touchStart(e) {
			this.touchStartX = e.touches[0].clientX;
			this.touchStartY = e.touches[0].clientY;
		},
		touchEnd(e) {
			let deltaX = e.changedTouches[0].clientX - this.touchStartX;
			// 小于0 从下往上滑  大于0 从上往下
			let deltaY = e.changedTouches[0].clientY - this.touchStartY;
			if (Math.abs(deltaY) > 40 && Math.abs(deltaX) < Math.abs(deltaY)) {
				if (deltaY > 0) {
					this.showUploadContainer = true;
					setTimeout(() => {
						this.changeTop(0);
					}, 150);
				} else {
					this.showUploadContainer = false;
				}
			}
		},
		changeTab(idx) {
			this.tabIdx = idx;
		},
		clearImg() {
			this.uploadImgInfo.src = "";
		},
		updateImgInfo(info) {
			this.uploadImgInfo = { ...info };
		}
	}
};
</script>

<style lang="less" scoped>
.main {
	width: 100vw;
	min-height: 100vh;
	background-color: #f7f7f7;
	// padding-bottom: calc(24rpx + env(safe-area-inset-bottom) / 2);
}
.content {
	width: 100%;
	background-color: #ffffff;
	height: calc(100vh - var(--content-top));
	border-radius: 24rpx 24rpx;
	padding: 62rpx 0 0 0;
	position: relative;
	.content_bar {
		background-color: #e5e5e5;
		height: 8rpx;
		width: 62rpx;
		border-radius: 20rpx;
		position: absolute;
		top: 24rpx;
		left: 50%;
		transform: translateX(-50%);
	}
}
.tabs {
	background-color: #f4f5f6;
	padding: 4rpx;
	border-radius: 16rpx;
	position: relative;
	width: calc(100% - 92rpx);
	margin-left: 46rpx;
	.tab_bar {
		position: absolute;
		background-color: #fff;
		width: calc(50% - 8rpx);
		height: calc(100% - 8rpx);
		border-radius: 16rpx;
		z-index: 1;
		transition: all 0.2s;
	}
	.act_tab_item {
		position: relative;
		z-index: 2;
		transition: all 0.4s;
		view {
			background: linear-gradient(45deg, #486cf6 0%, #b458ff 100%);
			font-weight: bold;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}

	.tab_item {
		font-size: 30rpx;
		color: #777777;
		height: 70rpx;
		width: 50%;
	}
}

.tab_scroll {
	height: calc(100% - 80rpx);
	position: relative;
	.scroll {
		padding-bottom: 46rpx;
	}
}
.tab_scroll.tab_scroll_full {
	height: calc(100% - 80rpx - 50rpx);
}
.scroll_row {
	padding-top: 46rpx;
}
.button_row {
	width: 100%;
	height: 124rpx;
	font-weight: bold;
	color: #333333;
	background-color: #fff;
	box-shadow: 0px 0 23px 0px rgba(0, 0, 0, 0.07);
	border-radius: 24rpx;
	width: calc(100% - 92rpx);
	margin: 0 auto 0 auto;
	padding: 0 38rpx;
	.button_row_icon {
		width: 38rpx;
		height: 38rpx;
	}
}

.history_button {
	position: fixed;
	bottom: calc(68rpx + env(safe-area-inset-bottom) / 2);
	width: 234rpx;
	height: 76rpx;
	background: #ffffff;
	box-shadow: 0px 0 23px 0px rgba(0, 0, 0, 0.07);
	border-radius: 80rpx;

	font-weight: bold;
	font-size: 28rpx;
	left: 50%;
	transform: translateX(-50%);
	view {
		background: linear-gradient(27deg, #fa672e 30%, #c844f0 65%, #5a73f8 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	image {
		width: 26rpx;
		height: 26rpx;
		margin-right: 8rpx;
	}
}
</style>
